<template>
    <jb-crud-page
        ref="onlineUserPage"
        title-icon="mdi:table-large"
        title-text="在线用户管理"
        search-url="/api/admin/onlineUser/datas"
        :search-conditions="pageConditions"
    >
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                placeholder="请输入关键字搜索"
            />
            <jb-select
                v-model:value="pageConditions.state"
                url="/api/admin/onlineUser/stateOptions"
                placeholder="=状态="
                class="w-130px"
                filterable
            ></jb-select>
        </template>
        <template #opt>
            <jb-btn
                :icon="Icons.REFRESH"
                ghost
                type="primary"
                @click="onlineUserPage?.loadData()"
            >
                刷新
            </jb-btn>
        </template>

        <template #default="{ state }">
            <vxe-table
                height="auto"
                border
                show-header-overflow
                show-overflow
                :column-config="{ resizable: true }"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :row-config="{ isHover: true }"
                align="center"
                :data="state.list"
            >
                >
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="userUsername"
                    title="用户名"
                    min-width="180"
                    fixed="left"
                ></jb-column>
                <jb-column
                    field="sessionId"
                    title="会话ID"
                    min-width="420"
                    fixed="left"
                ></jb-column>
                <jb-column field="log" title="登录日志" width="120">
                    <template #default="{ row }">
                        <jb-btn
                            :icon="Icons.EYE"
                            type="primary"
                            ghost
                            tip-text="登录日志详情查看"
                            :drawer-component="LoginLog"
                            :drawer-title="`登录日志详情查看${row?.userUsername}`"
                            :drawer-component-props="{ id: row.loginLogId }"
                            :drawer-positive-text="''"
                            >查看</jb-btn
                        >
                    </template>
                </jb-column>
                <jb-column field="stateName" title="在线状态" min-width="120"></jb-column>

                <jb-column field="loginTime" title="登录时间" min-width="200"></jb-column>
                <jb-column
                    field="updateTime"
                    title="更新时间"
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="expirationTime"
                    title="过期时间"
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="offlineTime"
                    title="离线时间"
                    min-width="200"
                ></jb-column>

                <jb-column title="操作" fixed="right" width="100">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="强制退出登录"
                            secondary
                            type="error"
                            confirm-text="确定让该用户强制退出？"
                            :url="`/api/admin/onlineUser/${row.id}`"
                            @success="onlineUserPage?.loadData()"
                            >强退</jb-btn
                        >
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import LoginLog from './component/login-log.vue'

const onlineUserPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    state: ''
})
</script>

<style scoped></style>
